<template>
   <div class="header">
       <div class="header-left">
              <div class="iconfont back-icon">&#xe624;</div>
       </div>
       <div class="header-input">
            <span class="iconfont">&#xe632;</span>
            输入城市/景点/主题
       </div>
       <router-link to="/city">
            <div class="header-right">      
              {{this.$store.state.city}}
              <span class="iconfont arrow-icon">&#xe6aa;</span>
            </div>
       </router-link>
   </div>

</template>

<script>

  export default{
      name:'HomeHeader'
  
  }

</script>

<style  scoped>

 .header{
   display: flex;
   height: 43px;
   background:#00bcd4;
   color:#fff;
   }
   .header-left{ 
    width: 32px;
    float: left;
    line-height: 43px;
    }
    .header-left .back-icon{
      text-align: center;
      font-size:20px;
    }

   .header-input{
     margin-top:6px;
     height:32px;
     margin-left:10px;
     padding-left:10px;
     flex:1;
     background: #fff;
     border-radius: 5px;
     color:#ccc;
     line-height:32px;
     }
    
   .header-right{
      min-width:62px;
      padding: 3px;
      float: right;
      text-align:center;
      line-height: 43px;
      color:#fff;
   }
   .header-right .arrow-icon{
      font-size:14px;
   }
</style>